<template>
  <div>
    <video
      ref="videoRef"
      src="./test3.mp4"
      width="600"
      height="500"
      @timeupdate="handleTimeUpdate"
    ></video>
    <div class="btn_box">
      <button class="bt1" @click="playVideo">播放</button>
      <button class="bt1" @click="pauseVideo">暂停</button>
      <span class="sp">PV:{{ pv }}</span>
    </div>
  </div>
</template>
  
<script setup lang="ts">
//ref watch 方法的引入 
import { ref,watch  } from "vue";

//对vedio标签进行事件绑定
const videoRef = ref<HTMLVideoElement | null>(null);

//当前时间记录
const currentTime = ref<number>(0);

//pv记录
let pv = ref<number>(0);

//开始播放
const playVideo = () => {
  if (videoRef.value) {
    videoRef.value.play();
  }
};

//暂停播放
const pauseVideo = () => {
  if (videoRef.value) {
    videoRef.value.pause();
  }
};

// 播放时间统计 pv处理
const handleTimeUpdate = () => {
  //由于currentTime 获得的是当前时间 所以需要取个整 不然下面的计算得不到整数0
  if (videoRef.value) currentTime.value = Math.floor(videoRef.value.currentTime);
};

//侦听事件变化 事件变化进行回调处理
watch(currentTime,(newTime) => {
  if(newTime % 3 === 0 ){
    pv.value++;
  }
})

</script>
<style lang="scss" scoped>
.btn_box {
  margin: 0 auto;
  width: 300px;
  height: 50px;
  margin-left: 30px;
  .bt1 {
    cursor: pointer;
    width: 50px;
    height: 50px;
    background: #ccc;
    margin-right: 20px;
    /* display: block; */
  }
  .sp{
    margin-left: 30px;
    font-size: 30px;
    font-weight: bold;
    color:black;
  }
}
</style>
  
  